<script setup>
import StarrySky from '@/components/StarrySky.vue'

const ourinfo = [
  {
    id: 1,
    avatarUrl: '/static/images/default.png',
    nickname: '成员 A',
    role: '前端',
    tags: [],
  },
  {
    id: 2,
    avatarUrl: '/static/images/default.png',
    nickname: '成员 B',
    role: '后端',
    tags: [],
  },
  {
    id: 3,
    avatarUrl: '/static/images/default.png',
    nickname: '成员 C',
    role: '产品',
    tags: [],
  },
  {
    id: 4,
    avatarUrl: '/static/images/default.png',
    nickname: '成员 D',
    role: '测试',
    tags: [],
  },
  {
    id: 5,
    avatarUrl: '/static/images/default.png',
    nickname: '成员 E',
    role: '设计',
    tags: [],
  },
]
</script>

<template>
  <!-- 星空背景 -->
  <StarrySky />

  <view class="about-container">
    <!-- Logo和标题区域 -->
    <view class="header-section">
      <text class="about-title">关于我们</text>
      <text class="team-name">开源示例团队</text>
    </view>

    <!-- 团队成员区域 -->
    <view class="team-section">
      <text class="section-title">
        <text class="iconfont icon-team"></text>
        团队成员
      </text>
      <view class="members-grid">
        <view v-for="member in ourinfo" :key="member.id" class="member-card">
          <view class="member-avatar">
            <image
              :src="member.avatarUrl"
              mode="aspectFill"
              class="avatar-image"
            />
          </view>
          <view class="member-info">
            <text class="member-name">{{ member.nickname }}</text>
            <text class="member-role">{{ member.role }}</text>
            <!-- 成员标签 -->
            <view class="member-tags" v-if="member.tags && member.tags.length">
              <uni-tag
                v-for="(tag, index) in member.tags"
                :key="index"
                :text="tag"
                size="small"
                type="primary"
                :circle="true"
                class="tag-item"
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.about-container {
  min-height: 100vh;
  padding: 40rpx 64rpx calc(20rpx + env(safe-area-inset-bottom)) 64rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  position: relative;
  max-width: 800rpx;
  margin: 0 auto;
}

// Logo和标题区域
.header-section {
  text-align: center;
  margin: 80rpx 0 60rpx 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30rpx);
  border-radius: 40rpx;
  padding: 60rpx 32rpx;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.15);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  width: 90%;
  max-width: 600rpx;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
    background-size: 400% 100%;
    animation: gradientShift 3s ease-in-out infinite;
  }

  .about-title {
    font-size: 56rpx;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32rpx 0;
    text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
    display: block;
  }

  .team-name {
    font-size: 40rpx;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32rpx;
    position: relative;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    display: block;

    &::after {
      content: '';
      position: absolute;
      bottom: -16rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 120rpx;
      height: 6rpx;
      background: linear-gradient(90deg, #667eea, #764ba2);
      border-radius: 4rpx;
    }
  }
}

// 团队成员区域样式
.team-section {
  width: 90%;
  max-width: 600rpx;
  margin-bottom: 60rpx;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30rpx);
  border-radius: 40rpx;
  padding: 40rpx 32rpx;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.15);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.section-title {
  font-size: 40rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 40rpx 0;
  display: flex;
  align-items: center;
  gap: 24rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);

  .iconfont {
    font-size: 56rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

// 团队成员区域
.members-grid {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.member-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30rpx);
  border-radius: 32rpx;
  padding: 40rpx;
  text-align: center;
  transition: all 0.3s ease;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 4rpx;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent
    );
    transition: left 0.5s ease;
  }

  .member-avatar {
    margin-bottom: 32rpx;

    .avatar-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 6rpx solid rgba(255, 255, 255, 0.3);
      transition: all 0.3s ease;
    }
  }

  .member-info {
    .member-name {
      font-size: 36rpx;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin: 0 0 16rpx 0;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      display: block;
    }

    .member-role {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
      margin: 0 0 20rpx 0;
      background: rgba(255, 255, 255, 0.2);
      padding: 8rpx 24rpx;
      border-radius: 24rpx;
      display: inline-block;
      backdrop-filter: blur(20rpx);
      border: 2rpx solid rgba(255, 255, 255, 0.2);
    }

    .member-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12rpx;
      margin-top: 16rpx;

      .tag-item {
        :deep(.uni-tag) {
          background: linear-gradient(
            45deg,
            rgba(102, 126, 234, 0.6),
            rgba(118, 75, 162, 0.5)
          ) !important;
          border: 2rpx solid rgba(255, 255, 255, 0.3) !important;
          color: rgba(255, 255, 255, 0.9) !important;
          font-size: 22rpx !important;
          padding: 6rpx 16rpx !important;
          backdrop-filter: blur(10rpx);
        }

        :deep(.uni-tag--primary) {
          background: linear-gradient(
            45deg,
            rgba(102, 126, 234, 0.6),
            rgba(118, 75, 162, 0.5)
          ) !important;
        }
      }
    }
  }
}

// 动画
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 小程序样式适配 */
/* #ifdef MP-WEIXIN */
.header-section {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.3) 0%,
    rgba(118, 75, 162, 0.25) 50%,
    rgba(240, 147, 251, 0.2) 100%
  ) !important;
  backdrop-filter: none !important;
  border: 2rpx solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.15) !important;

  &::before {
    display: none !important;
  }
}

.team-section {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.25) 0%,
    rgba(118, 75, 162, 0.2) 100%
  ) !important;
  backdrop-filter: none !important;
  border: 2rpx solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.15) !important;
}

.member-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.08) 100%
  ) !important;
  backdrop-filter: none !important;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1) !important;
  border: 2rpx solid rgba(255, 255, 255, 0.25) !important;

  &::before {
    display: none !important;
  }
}

.about-title,
.team-name,
.section-title,
.member-name {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4) !important;
}

.member-role {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2rpx solid rgba(255, 255, 255, 0.25) !important;
}

.member-tags {
  .tag-item {
    :deep(.uni-tag) {
      background: linear-gradient(
        45deg,
        rgba(102, 126, 234, 0.4),
        rgba(118, 75, 162, 0.3)
      ) !important;
      border: 2rpx solid rgba(255, 255, 255, 0.4) !important;
      color: rgba(255, 255, 255, 0.95) !important;
    }
  }
}
/* #endif */

/* H5样式优化 */
/* #ifdef H5 */
.header-section,
.team-section {
  backdrop-filter: blur(30rpx) !important;
}

.member-card {
  backdrop-filter: blur(30rpx) !important;
}
/* #endif */

// 平板适配
@media (min-width: 768px) {
  .about-container {
    max-width: 1000rpx;
    margin: 0 auto;
    padding: 60rpx 100rpx calc(40rpx + env(safe-area-inset-bottom)) 100rpx;
  }

  .header-section,
  .team-section {
    max-width: 700rpx;
  }

  .members-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32rpx;
  }

  .header-section {
    padding: 80rpx 60rpx;

    .about-title {
      font-size: 64rpx;
    }

    .team-name {
      font-size: 48rpx;
    }
  }
}
</style>
